<template>
  <div>
    <el-button type="primary" @click="openAddDialog">添加酒店</el-button>

    <el-table :data="paginatedHotels" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="hotelName" label="酒店名称" width="150"></el-table-column>
      <el-table-column prop="hotelAddress" label="地址" width="150"></el-table-column>
      <el-table-column prop="hotelStar" label="星级" width="100"></el-table-column>
      <el-table-column prop="hotelFacilities" label="设施" width="150"></el-table-column>
      <el-table-column prop="hotelTheme" label="主题" width="150"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button size="mini" @click="openEditDialog(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteHotel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination

        style="margin-top: 20px;"
        background
        layout="prev, pager, next"
        :total="totalHotels"
        :page-size="pageSize"
        @current-change="handlePageChange"
    ></el-pagination>

    <!-- 编辑酒店对话框 -->
    <el-dialog title="编辑酒店" v-model="isEditDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="酒店名称">
          <el-input v-model="editForm.hotelName"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.hotelAddress"></el-input>
        </el-form-item>
        <el-form-item label="星级">
          <el-select v-model="editForm.hotelStar" placeholder="请选择">
            <el-option v-for="item in starOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设施">
          <el-select v-model="editForm.hotelFacilities" multiple placeholder="请选择">
            <el-option v-for="item in facilitiesOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主题">
          <el-select v-model="editForm.hotelTheme" multiple placeholder="请选择">
            <el-option v-for="item in themeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- eslint-disable-next-line -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateHotel">确认</el-button>
      </div>
    </el-dialog>

    <!-- 添加酒店对话框 -->
    <el-dialog title="添加酒店" v-model="isAddDialogVisible">
      <el-form :model="addForm">
        <el-form-item label="酒店名称">
          <el-input v-model="addForm.hotelName"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="addForm.hotelAddress"></el-input>
        </el-form-item>
        <el-form-item label="星级">
          <el-select v-model="addForm.hotelStar" placeholder="请选择">
            <el-option v-for="item in starOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设施">
          <el-select v-model="addForm.hotelFacilities" multiple placeholder="请选择">
            <el-option v-for="item in facilitiesOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主题">
          <el-select v-model="addForm.hotelTheme" multiple placeholder="请选择">
            <el-option v-for="item in themeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- eslint-disable-next-line -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addHotel">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {
  listHotels,
  deleteHotel as deleteHotelAPI,
  updateHotel as updateHotelAPI,
  addHotel as addHotelAPI
} from '@/api/hotel.js'
import {ElMessageBox, ElMessage} from 'element-plus'

const hotels = ref([])
const currentPage = ref(1)
const pageSize = 15
const totalHotels = ref(0)
const paginatedHotels = ref([])

const fetchHotels = async () => {
  try {
    const response = await listHotels()
    if (response.code === 1) {
      hotels.value = response.data
      totalHotels.value = hotels.value.length
      paginateHotels()
    } else {
      throw new Error(response.msg)
    }
  } catch (error) {
    console.error('Error fetching hotels:', error)
  }
}

const paginateHotels = () => {
  const start = (currentPage.value - 1) * pageSize
  const end = start + pageSize
  paginatedHotels.value = hotels.value.slice(start, end)
}

const handlePageChange = (page) => {
  currentPage.value = page
  paginateHotels()
}

const starOptions = [
  {label: '一星', value: '一星'},
  {label: '两星', value: '两星'},
  {label: '三星', value: '三星'},
  {label: '四星', value: '四星'},
  {label: '五星', value: '五星'},
]

const facilitiesOptions = [
  {label: '免费停车', value: '免费停车'},
  {label: '室内游泳', value: '室内游泳'},
  {label: '酒吧', value: '酒吧'},
  {label: '按摩', value: '按摩'},
]

const themeOptions = [
  {label: '情侣主题', value: '情侣主题'},
  {label: '商务主题', value: '商务主题'},
  {label: '自然风光', value: '自然风光'},
  {label: '历史文化', value: '历史文化'},
]

const openEditDialog = (hotel) => {
  editForm.value = {...hotel}
  isEditDialogVisible.value = true
}

const isEditDialogVisible = ref(false)
const editForm = ref({
  id: '',
  hotelName: '',
  hotelAddress: '',
  hotelStar: '',
  hotelFacilities: '',
  hotelTheme: ''
})

const isAddDialogVisible = ref(false)
const addForm = ref({
  hotelName: '',
  hotelAddress: '',
  hotelStar: '',
  hotelFacilities: '',
  hotelTheme: ''
})



const openAddDialog = () => {
  addForm.value = {
    hotelName: '',
    hotelAddress: '',
    hotelStar: '',
    hotelFacilities: '',
    hotelTheme: ''
  }
  isAddDialogVisible.value = true
}




const addHotel = async () => {
  try {
    await addHotelAPI(addForm.value)
    ElMessage({
      type: 'success',
      message: '添加成功!',
    })
    isAddDialogVisible.value = false
    fetchHotels()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '添加失败',
    })
    console.error('Error adding hotel:', error)
  }
}

const updateHotel = async () => {
  try {
    await updateHotelAPI(editForm.value)
    ElMessage({
      type: 'success',
      message: '更新成功!',
    })
    isEditDialogVisible.value = false
    fetchHotels()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '更新失败',
    })
    console.error('Error updating hotel:', error)
  }
}

const deleteHotel = async (id) => {
  try {
    await ElMessageBox.confirm('此操作将永久删除该酒店, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    await deleteHotelAPI(id)
    ElMessage({
      type: 'success',
      message: '删除成功!',
    })
    fetchHotels()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage({
        type: 'error',
        message: '删除失败',
      })
    }
  }
}

onMounted(() => {
  fetchHotels()
})
</script>

<style scoped>
/* 可以添加你的样式 */
</style>
